{% load helpers %}
{% load i18n %}

<div class="card">
  <h2 class="card-header">{% trans "Authentication" %}</h2>
  <table class="table table-hover attr-table">
    <tr>
      <th scope="row">{% trans "Type" %}</th>
      <td>{{ object.get_auth_type_display|placeholder }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Cipher" %}</th>
      <td>{{ object.get_auth_cipher_display|placeholder }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "PSK" %}</th>
      <td>
        <span id="secret" class="font-monospace" data-secret="{{ object.auth_psk }}">{{ object.auth_psk|placeholder }}</span>
        {% if object.auth_psk %}
        <button type="button" class="btn btn-primary toggle-secret float-end" data-bs-toggle="button">{% trans "Show Secret" %}</button>
        {% endif %}
      </td>
    </tr>
  </table>
</div>
